<template>
  <div class="hot">
    <div class="hot-top">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" />
      <span class="hot-top-title">本周热门榜单</span>
      <span class="hot-all">
        全部榜单<span class="iconfont iconjiantou1"></span>
      </span>
    </div>
    <ul class="hot-list">
      <li class="hot-item" @click="toDetails(hot.id)" v-for="hot of hotList" :key="hot.id">
        <img :src="hot.imgUrl" :alt="hot.title">
        <p class="title">{{ hot.title }}</p>
        <div class="mark">
          <span class="price">￥{{ hot.price }}</span>起
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['hotList'],
  methods: {
    toDetails (id) {
      this.hotList.map(item => {
        if (item.id === id) {
          this.$router.push('/details?hotData=' + JSON.stringify(item))
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
@import "~css/common.styl"
.hot
  background-color: #fff
  margin-top: .2rem
  .hot-top
    padding: .24rem 0 .26rem
    position: relative
    font-size: .24rem
    img
      width: .3rem
      height: .3rem
      margin-left: .2rem
      display: inline-block
    .hot-top-title
      font-size: .32rem
      display: inline-block
    .hot-all
      font-size: .24rem
      position: absolute
      right: .2rem
  .hot-list
    font-size: .24rem
    padding: 0 .24rem
    white-space: nowrap
    overflow-x: scroll
    overflow-y: hidden
    height: 3rem
    padding-top: .06rem
    .hot-item
      width: 2rem
      display: inline-block
      text-align: center
      margin-right: .2rem
      position: relative
      &:nth-child(1):before
        $mark(1,#ff8132,#ff1f2d)
      &:nth-child(2):before
        $mark(2,#ff8132,#ff1f2d)
      &:nth-child(3):before
        $mark(3,#ff8132,#ff1f2d)
      img
        width: 100%
        height: 2rem
      .title
        margin-top: .12rem
        $txtOverflow ()
      .mark
        margin-top: .08rem
        .price
          color: #ff8300
          font-size: .28rem
</style>
